<template>
      <div class="medium-area medium-bot">
            <Header :isTransparentBackground="false"></Header>
            <div class="pt-gap-comm medium-main-box">
                  <!-- banner 及 辅助导航栏 开始 -->
                  <PageBanner pictureLink="https://www.tencent.com/img/news.jpg" :navHeadShow="false" :bannerHight="240"
                        majorHeading="京咛新闻"></PageBanner>
                  <!-- banner 及 辅助导航栏 结束 -->
                  <div class="constraint breadcrumb-box flex ali-center">
                        <el-breadcrumb :separator-icon="ArrowRight">
                              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                              <el-breadcrumb-item>媒体</el-breadcrumb-item>
                              <el-breadcrumb-item>京咛新闻</el-breadcrumb-item>
                        </el-breadcrumb>
                  </div>
                  <div class="medium-main-content-group bg-write">
                        <div class="constraint medium-cop-row flex jus-space-bet ali-center flex-warp">
                              <div class="medium-nav-btn-box">
                                    <ul class="flex">
                                          <li :class="['relative ft-center _item-li', { 'mod-medium-list': data.navIndex == index }]"
                                                v-for="(item, index) in navList" :key="index"
                                                @click="getNavButtonChange(index)">{{ item.text }}</li>
                                    </ul>
                              </div>
                              <div class="flex">
                                    <div>
                                          <el-date-picker v-model="value3" type="year" placeholder="全部日期" />
                                    </div>
                                    <div class="mar-lft">
                                          <el-input v-model="input" placeholder="关键字" clearable :prefix-icon="Search" />
                                    </div>
                              </div>
                              <div class="arrange-fs-area mobile-dis">
                                    <ul class="flex ali-center">
                                          <li :class="[{ 'arr-svg-1 arr-active': data.arrangement == 0 }]"
                                                @click="getArrangementChange(0)">
                                                <svg t="1698078703800" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                      xmlns="http://www.w3.org/2000/svg" p-id="18855" width="35" height="35">
                                                      <path d="M304.5 192.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C320.5 199.663 313.337 192.5 304.5 192.5zM560.5 192.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C576.5 199.663 569.337 192.5 560.5 192.5zM816.5 192.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C832.5 199.663 825.337 192.5 816.5 192.5zM304.5 448.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C320.5 455.663 313.337 448.5 304.5 448.5zM560.5 448.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C576.5 455.663 569.337 448.5 560.5 448.5zM816.5 448.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C832.5 455.663 825.337 448.5 816.5 448.5zM304.5 704.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C320.5 711.663 313.337 704.5 304.5 704.5zM560.5 704.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C576.5 711.663 569.337 704.5 560.5 704.5zM816.5 704.5l-96 0c-8.837 0-16 7.163-16 16l0 96c0 8.837 7.163 16 16 16l96 0c8.837 0 16-7.163 16-16l0-96C832.5 711.663 825.337 704.5 816.5 704.5z"
                                                            p-id="18856" fill="#13227a"></path>
                                                </svg>
                                          </li>

                                          <li :class="[{ 'arr-svg-2 arr-active': data.arrangement == 1 }]"
                                                @click="getArrangementChange(1)">
                                                <svg t="1698079018901" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                      xmlns="http://www.w3.org/2000/svg" p-id="36411" width="28" height="28">
                                                      <path d="M272.384 93.868h749.568v136.192h-749.568z" fill="#13227a"
                                                            p-id="36412"></path>
                                                      <path d="M0 93.868h136.192v136.192h-136.192z" fill="#13227a"
                                                            p-id="36413"></path>
                                                      <path d="M272.384 754.00666667h749.568v136.192h-749.568z" fill="#13227a"
                                                            p-id="36414"></path>
                                                      <path d="M0 754.00666667h136.192v136.192h-136.192z" fill="#13227a"
                                                            p-id="36415"></path>
                                                      <path d="M272.384 434.348h749.568v136.192h-749.568z" fill="#13227a"
                                                            p-id="36416"></path>
                                                      <path d="M0 434.348h136.192v136.192h-136.192z" fill="#13227a"
                                                            p-id="36417"></path>
                                                </svg>
                                          </li>
                                    </ul>
                              </div>
                        </div>
                        <EnterpriseDynamics v-model:arrangement="data.arrangement" v-if="data.navIndex == 0">
                        </EnterpriseDynamics>
                        <FinancialNews v-model:arrangement="data.arrangement" v-else></FinancialNews>
                  </div>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
// 导航栏组件
import Header from '@/components/client/common/header/index.vue'
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue'
import PageBanner from '@/components/client/common/pageBanner/index.vue'
import EnterpriseDynamics from '@/components/client/medium/enterpriseDynamics.vue'
import FinancialNews from '@/components/client/medium/financialNews.vue'
import { Search } from '@element-plus/icons-vue'

import { onMounted, onUpdated, reactive, ref } from 'vue';

const value3 = ref('')
const input = ref('')

let navList = [
      {
            text: '企业'
      },
      {
            text: '财务'
      }
]

let data = reactive({
      navIndex: 0,
      arrangement: 0,         // 排列方式
})

onUpdated(() => {
      if (location.hash) {
            let strChar = location.hash.split("#").join("")
            let strNumIndex = parseInt(strChar.charAt(strChar.length - 1)) - 1
            console.log('1111:'+strNumIndex)
            data.navIndex = strNumIndex
      }
})

let getNavButtonChange = (e: number) => {
      data.navIndex = e
}

let getArrangementChange = (e: number) => {
      data.arrangement = e
}

</script>